<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./base/vue.js"></script>
</head>
<body>
    
    <div id="app"> 
        <my-component></my-component>
    </div>
    <!--虚拟dom-->
    <template id="my-component">
        <div>
            <h1 id="title">hello! {{message}}</h1>
            <p><input type="text" v-model="message"></p>
            <p><button @click="destroy">组件销毁了！</button></p>
        </div>
    </template>
    

    <script>
        //组件从创建到销毁的一系列过程就叫做组件的生命周期
        //vue在整个生命周期中为我们提供了一些钩子函数
        //钩子函数的特点就是会在生命周期的某一时刻去进行触发

        /*
            生命周期：
                组件的生命周期分为三个阶段： 初始化  运行中  销毁
                初始化阶段： beforeCreate  created  beforeMount (render) mounted
                运行中阶段： beforeUpdate  updated
                销毁中阶段： beforeDestroy destroyed
        
        */
        //1.一个组件或者实例的生命周期都是从new创建开始的
        //2.实例化之后，内部会进行初始化的事件与生命周期相关的配置
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    message:1
                }
            },
            methods:{
                destroy(){
                    this.$destroy();//销毁组件
                }
            },
            //3.这个钩子函数内部获取不到数据,dom元素也不能渲染出来。此钩子函数基本不会做任何事情
            beforeCreate(){
                console.log("beforeCreate...")
                console.log(this.message,document.getElementById("title"))
            },
            //4.此钩子函数，数据已经挂载了。但是dom元素还是没有渲染出来 null的
            //这个钩子函数如果同步的更改数据，不会影响运行时钩子函数的。 
            //1.可以用来发送ajax请求！  2.也可以做一些初始化事件的操作。
            created(){
                console.log("created...")
                this.timer = setInterval(() => {
                    console.log(111111111111111)
                    this.message++
                }, 2000);
                console.log(this.message,document.getElementById("title"))
            },
            //5 下面就是组件或者实例去查找各自的模板，然后将其编译成虚拟dom放入到render函数中。
            //6 beforeMount这个钩子函数代表dom节点马上就要被渲染出来了，但是还没有渲染出来。
            //此钩子函数与created钩子函数差不多，都是可以进行ajax请求与初始化事件的操作。
            beforeMount(){
                console.log("beforeMount...")
                console.log(this.message,document.getElementById("title"))
            },
            // render(){//7. 生成好了虚拟dom，然后去替换对应的el,渲染成真实dom   做一个初始化的渲染过程
            //     console.log("render")
            // }
            //8.mounted是生命周期初始化阶段的最后一个钩子函数了
            //这个钩子函数数据早就拿到了，同时dom元素也已经渲染出来了。
            mounted(){
                console.log("mounted...")
                console.log(this.message,document.getElementById("title"))
            },
            //9 beforeUpdate钩子函数当数据发生改变的时候会立马执行
            //数据改变的时候，只会获取到更新前的值。
            //所以说这个钩子函数内部千万不要数据进行更改操作，会造成死循环
            beforeUpdate(){
                //this.message++
                console.log("beforeUpdate...",document.getElementById("title").innerHTML)
            },
            //10 updated钩子函数获取到的是更新之后的内容
            //内部操作： 生成新的虚拟dom,跟上一次的虚拟dom结构进行对比，对比出来差异后进行渲染更新
            updated(){
                console.log("updated...",document.getElementById("title").innerHTML)
            },
            //11 销毁前可以在这个钩子函数里面做一些善后的操作   例如可以清除一些事件（初始化阶段）
            
            beforeDestroy(){
                console.log("beforeDestroy...")
                //清除定时器操作
                clearInterval(this.timer)
            },
            //销毁组件  意味着组件的双向数据绑定没了、事件监听器watcher也都被移除掉了
            //但是组件的dom结构还是存在的
            destroyed(){
                console.log("destroyed...")
            }
        })


        new Vue({}).$mount("#app");

      
    </script>
</body>
</html>